let cur = 0

let steps = document.getElementsByClassName('steps')[0]

let next_btn = document.getElementsByClassName('next')[0]

let prev_btn = document.getElementsByClassName('prev')[0]

let add_btn = document.getElementsByClassName('add')[0]

let steps_list = document.getElementsByClassName('steps_item')
steps_list = Array.prototype.slice.call(steps_list, 0)
let line_list = document.getElementsByClassName('line')
line_list = Array.prototype.slice.call(line_list, 0)


next_btn.onclick = function() {
    this.classList.add('btn_click')
    setTimeout(() => {
        this.classList.remove('btn_click')
    }, 1300);

    cur++
    if (cur < steps_list.length) {
        steps_list[cur].classList.add('active')
        line_list[cur - 1].classList.add('active')
    } else {
        cur = steps_list.length - 1
    }

    if (cur == steps_list.length - 1) {
        this.classList.add('disable')
    } else {
        prev_btn.classList.remove('disable')
    }

}


prev_btn.onclick = function() {
    this.classList.add('btn_click')
    setTimeout(() => {
        this.classList.remove('btn_click')
    }, 1300);

    cur--
    if (cur >= 0) {
        steps_list[cur + 1].classList.remove('active')
        line_list[cur].classList.remove('active')
    }

    if (cur <= 0) {
        cur = 0
        this.classList.add('disable')
    }

    if (cur < steps_list.length - 1) {
        next_btn.classList.remove('disable')
    }
}


add_btn.onclick = function() {
    this.classList.add('btn_click')
    setTimeout(() => {
        this.classList.remove('btn_click')
    }, 1300);

    let steps_item = document.createElement('div')
    steps_item.classList.add('steps_item')
    let steps_text = document.createElement('span')
    steps_text.innerText = steps_list.length + 1
    steps_item.append(steps_text)
    let line = document.createElement('div')
    line.classList.add('line')
    line_list.push(line)
    steps_item.append(line)
    steps_list.push(steps_item)
    steps.append(steps_item)
}